/*
 * @Author       : xh
 * @Date         : 2022-11-14 19:53:18
 * @LastEditors: y001554
 * @FileName     :
 */
import {
  defineComponent,
  toRefs,
  reactive,
  computed,
  onMounted,
  watch,
  unref,
  nextTick,
  ref
} from 'vue'
import type { FormItemProps } from 'element-plus'
import { ElMessage, ElForm, ElTable } from 'element-plus'
import { FOOTER_OPTIONS, IPROPS, TOOGLE_NUM } from './composables/setting'
import { More } from '@element-plus/icons-vue'
import { Params, componentProps, ComponentProps } from './type'
import './index.scss'

// import Utils from '@@/utils/index'

// const defaultItems = {
//   label: '',
//   type: 'input',
//   kayName: 'id',
//   disabled: false,
//   props: {}
// }
const PROMISE_WHITE = ['radio', 'select', 'checkbox', 'select']

export default defineComponent({
  name: 'M-Pages',
  props: componentProps,
  emits: ['update:modelValue'],
  setup(props: ComponentProps, context) {
    const { slots, emit, attrs } = context
    const { formOptions, tableOptions, extraParams, request, sticky } = props
    const searchParams = ref<any>({})
    // customerProps.footerOptions = {
    //   ...FOOTER_OPTIONS,
    //   ...customerProps.footerOptions
    // }
    // console.log('customerProps', customerProps)
    const formRef = ref<any>()
    const tableRef = ref<any>()

    const loading = ref<boolean>(false)
    const all = ref<boolean>(false)
    const searchDom = reactive<any>({
      dom: null,
      height: 0,
      hidden: false
    })
    //@注释
    //@name:全部选项是否显示
    //@params:
    //@des:
    const toggle = () => {
      all.value = !all.value
    }

    const search = (params: any): void => {
      // debugger
      searchParams.value = { ...params, ...extraParams }
      // debugger
      nextTick(() => {
        tableRef.value && tableRef.value.loadList()
      })
    }
    const reset = (params: any): void => {
      searchParams.value = { ...params, ...extraParams }
      // debugger
      nextTick(() => {
        tableRef.value && tableRef.value.reset()
      })
    }

    //@注释
    //@name:高度触发
    //@params:
    //@des:
    const scrollTop = (e: number): void => {
      if (!sticky) return
      console.log('e', e)
      const rect = searchDom.dom?.getBoundingClientRect()
      const height: number = rect.height || 0
      if (e > height) {
        searchDom.hidden = true
      } else if (e <= 0) {
        searchDom.hidden = false
      }
    }
    //@注释
    //@name:初始化 页面计算
    //@params:
    //@des:
    const initPages = () => {
      const dom = document.getElementById('ylwl_pages__search')
      // const rect = dom?.getBoundingClientRect()
      searchDom.dom = dom
      // searchDom.height = rect?.height
      // console.log('height', rect?.height)
    }

    onMounted(async () => {
      initPages()
      console.log(111, slots)
    })

    return () => {
      return (
        <div v-loading={loading.value} class="ylwl_pages">
          <div
            class="ylwl_pages__search"
            id="ylwl_pages__search"
            style={{
              height: searchDom.hidden ? '0' : 'auto'
            }}
          >
            <M-Search
              onReset={reset}
              onSearch={search}
              formOptions={{ ...formOptions }}
              rules={formOptions.rules}
              ref={formRef}
              size="small"
            />
          </div>
          <div class="ylwl_pages__content">
            <M-Table
              {...tableOptions}
              v-slots={{
                ...slots
              }}
              request={request}
              extra={searchParams.value}
              ref={tableRef}
              onScrollTop={scrollTop}
            ></M-Table>
          </div>
        </div>
      )
    }
  }
})
